<!-- 添加计划--选择选择巡检设备按钮页面 -->
<template>
  <px-drawer v-model="dialogVisible" size="60%" @close="closeDrawer" @open="openDrawer">
    <template #header>
      <h3 style="font-weight: bold">选择巡检规则</h3>
    </template>
    <px-form ref="tableForm" class="custom-form-ui inspect-form" :model="queryParams" label-position="right" label-width="120px">
      <div style="display: flex">
        <px-form-item label="规则名称">
          <px-input
            v-model="queryParams.ruleCodeOrName"
            placeholder="请输入规则计划名称/编号"
            maxlength="50"
            clearable
            @blur="queryParams.ruleCodeOrName = $event.target.value.trim()"
            @keyup.enter="queryTable"
          >
            <template #suffix>
              <px-icon style="cursor: pointer" @click="queryTable">
                <search />
              </px-icon>
            </template>
          </px-input>
        </px-form-item>
        <px-form-item label="巡检区域">
          <px-tree-select
            v-model="queryParams.inspectArea"
            filterable
            clearable
            placeholder="请选择巡检区域"
            :props="{
              children: 'children',
              label: 'name',
              value: 'code'
            }"
            :data="checkAreaList"
            :render-after-expand="false"
            @focus="positionCodeFocus"
          />
        </px-form-item>
        <px-button type="primary" @click="queryTable">查询</px-button>
        <px-button @click="resetTable">重置</px-button>
      </div>
    </px-form>
    <InspectRulesTable
      :query-params="queryParams"
      :table-data="tableData"
      :total="total"
      :tableColumns="tableEqiupColums"
      :height="'calc(100vh - 280px)'"
      maxHeight="auto"
      @queryRuleId="queryRuleId"
      @select-items="selectTreeItems"
      @query-table="queryTable"
    />
    <template #footer>
      <px-button @click="close">取消</px-button>
      <px-button type="primary" @click="confirm"> 确定 </px-button>
    </template>
    <px-drawer v-model="innerDrawer" :append-to-body="true" size="55%" :with-header="false">
      <childrenDrawer :ruleId="ruleId" type="comp" />
      <template #footer>
        <px-button @click="innerDrawer = false">关闭</px-button>
      </template>
    </px-drawer>
  </px-drawer>
</template>
<script setup lang="ts">
import { queryPage } from "@/api/equip/inspectRule";
import { getTableData } from "@/api/system/positionManage";
import { stringTrimOfParams } from "@/utils/common";
import { reactive, ref, toRefs, watch } from "vue";
import childrenDrawer from "../../rule/components/ViewInspecDetail.vue";
import { TableItem } from "../../types";
import InspectRulesTable from "./InspectRulesTable.vue";
const dialogVisible = defineModel("isView");
const queryParams = ref({ pageNum: 1, pageSize: 20, ruleCodeOrName: "", inspectType: "", inspectArea: "", className: "" });
const tableData = ref<any>([]);
const innerDrawer = ref(false);
const ruleId = ref("");
const tableEqiupColums = ref<TableItem[]>([
  { prop: "selection", minWidth: "55", fixed: "left" },
  { prop: "ruleCode", label: "巡检规则编号", minWidth: "230", showOverflowTooltip: true, fixed: "left" },
  { prop: "ruleName", label: "巡检规则名称", minWidth: "230", showOverflowTooltip: true },
  {
    prop: "inspectTypeDesc",
    label: "巡检类型",
    minWidth: "120",
    showOverflowTooltip: true,
    customFun: row => {
      if (row) {
        const strArr = row.split("/");
        if (strArr.length > 1) {
          strArr.pop();
          if (strArr.length > 1) {
            return strArr.join("/");
          } else {
            return strArr.join("");
          }
        } else {
          return row;
        }
      } else {
        return "-";
      }
    }
  },
  { prop: "classNameDesc", label: "科室", minWidth: "120", showOverflowTooltip: true },
  { prop: "inspectAreaDesc", label: "巡检区域", minWidth: "230", showOverflowTooltip: true }
]);
defineOptions({
  name: "SelectInspectRules"
});
const props = defineProps<{ inspectType: number; className: string; typeCodeList: any[] }>();
const emits = defineEmits(["selectItems", "innerDrawerView"]);
const total = ref(0);
let selected: any[] = [];
const state = reactive<any>({
  checkAreaList: [] //巡检区域
});
const { checkAreaList } = toRefs(state);
//查询
const queryTable = async () => {
  queryParams.value.inspectType = props.inspectType;
  queryParams.value.className = props.className;
  const params: any = { ...queryParams.value };
  const tableDataRaw = await queryPage(stringTrimOfParams(params));
  tableData.value = tableDataRaw.data;
  total.value = tableDataRaw.total;
};
//巡检区域下拉框
const positionCodeFocus = async () => {
  const data = await getTableData({});
  checkAreaList.value = data || [];
};
watch(
  dialogVisible,
  async val => {
    if (val) {
      await queryTable();
    }
  },
  { immediate: true }
);
// 重置
const resetTable = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 20;
  queryParams.value.ruleCodeOrName = "";
  queryParams.value.inspectType = "";
  queryParams.value.inspectArea = "";
  queryTable();
};
function selectTreeItems(val) {
  selected = val;
}
const queryRuleId = id => {
  ruleId.value = id;
};
function close() {
  dialogVisible.value = false;
  selected = [];
  resetTable();
}
function confirm() {
  emits("selectItems", selected);
  close();
}
const openDrawer = () => {
  //抽屉打开执行的函数
  // queryTable();
};
const closeDrawer = () => {
  //抽屉关闭执行的函数
};
</script>
<style lang="scss" scoped>
@import url("../../scss/table-list.scss");
</style>
